<script setup lang="ts">
import { useRoute } from 'vue-router';
const route = useRoute();
const active = computed(() => route.path);
const routeNameList = ['tableComponent', 'echartsComponent', 'aiComponent'];
</script>
<template>
  <div class="layout">
    <el-menu class="layout-left" :default-active="active" router collapse>
      <el-menu-item index="/tableComponent">
        <el-icon><Monitor /></el-icon>
      </el-menu-item>
      <el-menu-item index="/echartsComponent">
        <el-icon><PictureFilled /></el-icon>
      </el-menu-item>
      <el-menu-item index="/aiComponent">
        <el-icon> <User /> </el-icon>
      </el-menu-item>
    </el-menu>
    <div class="layout-body">
      <router-view #default="{ Component }">
        <keep-alive :include="routeNameList" :max="5">
          <component :is="Component" />
        </keep-alive>
      </router-view>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.layout {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: row;
  .layout-left {
    position: relative;
  }
  .layout-body {
    flex: 1;
    width: 100vw;
    overflow-x: hidden;
  }
}
</style>
